<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="content-type" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" href="../../../js/layui/css/layui.css" media="all">
    <script src="../../../js/layui/layui.js"></script>
    <script src="../../../js/myJQ.js"></script>
    <style type="text/css">
        .layui-input-block input{
            border: none
        }

        .layui-upload-list{
            vertical-align: middle;
        }
        .special-block{
            margin-left: 20px;
        }
        .layui-form-item {
            margin-bottom: 0px;
            clear: both;
        }
        .layui-card-body {
            position: relative;
            padding: 0px 1px;
            line-height: 24px;
        }
        .layui-form-item {
            margin-bottom: 5px;
            clear: both;
        }
        .layui-icon {
            font-size: 20px;
            margin-left: 10px;
            padding-left: 5px;
            color: #1E9FFF;
        }
    </style>
</head>
<body>
<div style="padding: 0px; " id="productList">
</div>
<script>
    layui.use(["jquery",'rate'],function () {
        var $ = layui.$;
        var flow = layui.flow;
        var basePath = "",param = "";

        $(function () {
            basePath = getRootPath();
            getOrderList();
        })

        //获取商品详情
        function getOrderList() {
            var params = {};
            $.ajax({
                url:basePath+"/product/getProductList",
                type:"get",
                dataType:'json',
                data:params,
                cache:false,
                beforeSend :function(xmlHttp){
                    xmlHttp.setRequestHeader("If-Modified-Since","0");  //添加
                    xmlHttp.setRequestHeader("Cache-Control","no-cache"); //添加
                },
                success:function (result) {
                    createProductFloaw(result.data);
                }
            })
        }

        /**
         * 生成订单中心
         */
        var arr = 0;
        var list = [];
        function createProductFloaw(data) {
            debugger;
            //数据分组，每组2个
            arr = Math.ceil(data.length/2);
            var obj = data[0];
            var index = 0; //记录数据下表
            var htmlStr = "" //要动态拼接的html
            for (var i=0;i<arr;i++) {
                debugger;
                htmlStr  += '<div class="layui-row layui-col-space15" style="height: 16rem;;background-color: #D3D4D3;border: 1rem solid dimgrey">';
                for  (var j=0;j<2;j++){
                    var obj = data[index];
                    htmlStr  += '            <div class="layui-col-md6">\n' +
                        '                    <div class="layui-col-md7">\n' +
                        '                        <div class="layui-card">\n' +
                        '                            <div class="layui-card-header">商品图片</div>\n' +
                        '                            <div class="layui-card-body">\n' +
                        '                                <div class="layui-upload">\n' +
                        '                                    <div class="layui-upload-list">\n' +
                        '                                        <img class="layui-upload-img img'+obj.productId+'" src="'+isNull(obj.img)+'" style="width: 100%;height: 100%;" >\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                    <div class="layui-col-md5">\n' +
                        '                        <div class="layui-card">\n' +
                        '                            <div class="layui-card-header">商品信息</div>\n' +
                        '                            <div class="layui-card-body">\n' +
                        '                                <div class="layui-form-item">\n' +
                        '                                    <label class="layui-form-label">商品名:</label>\n' +
                        '                                    <div class="layui-input-block">\n' +
                        '                                        <input type="text" disabled lay-verify="title" value="'+obj.productName+'" autocomplete="off"\n' +
                        '                                               class="layui-input productName">\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                                <div class="layui-form-item" style="height: 1rem;">\n' +
                        '                                    <label class="layui-form-label">商品介绍:</label>\n' +
                        '                                    <div class="layui-input-block">\n' +
                        '                                        <input type="text" disabled lay-verify="title" value="'+obj.description+'" autocomplete="off"\n' +
                        '                                               class="layui-input description">\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                                <div class="layui-form-item" style="height: 1rem;">\n' +
                        '                                    <label class="layui-form-label">商品价格:</label>\n' +
                        '                                    <div class="layui-input-block">\n' +
                        '                                        <input type="text" disabled lay-verify="title" value="'+obj.price+'" autocomplete="off"\n' +
                        '                                               class="layui-input price">\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                                <div class="layui-form-item">\n' +
                        '                                    <div class="layui-input-block special-block">\n' +
                        '                                        <i class="layui-icon layui-icon-tread" title="差评"\n' +
                        '                                           ></i>\n' +
                        '                                        <i class="layui-icon layui-icon-praise" title="点赞"\n' +
                        '                                           ></i>\n' +
                        '                                        <i class="layui-icon layui-icon-cart-simple" title="加入购物车"\n' +
                        '                                           >\n' +
                        '                                        </i>\n' +
                        '                                        <i class="layui-icon layui-icon-star" data-type="collect" title="收藏" name="'+obj.productId+'"></i>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                                <div class="layui-form-item">\n' +
                        '                                    <div class="layui-input-block">\n' +
                        '                                        <button type="button" class="layui-btn layui-btn-warm buy" data-type="buy" name="'+obj.productId+'">立即购买</button>\n' +
                        '                                    </div>\n' +
                        '                                </div>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </div>\n' +
                        '                </div>\n'
                    index += 1;
                    if(index==data.length) break;
                }
                htmlStr +='</div>\n';
                if(index==data.length){
                    $("#productList").html(htmlStr);
                    return;
                }
            }
        }
        
        var active = {
            collect:function () {
                var productId = $(this).attr('name');
                var param = {
                    productId:productId
                }
                $.ajax({
                    url:basePath+'/order/addCollect',
                    dataType:'json',
                    data:param,
                    cache:false,
                    beforeSend :function(xmlHttp){
                        xmlHttp.setRequestHeader("If-Modified-Since","0");  //添加
                        xmlHttp.setRequestHeader("Cache-Control","no-cache"); //添加
                    },
                    success:function(result){
                        console.log(result);
                        parent.layer.msg(result.msg, {
                            icon: 1,
                            time:2000
                        });
                    },
                    async:false
                });
            },
            buy:function () {
                debugger
                var va = this.name;
                window.location.href="/order/orderBuyPage?productId="+this.name;
            }
            
        }

        /**
         * 点击"立即购买"触发的事件
         */
        $(document).on("click",'button.buy, .layui-icon-star',function () {
            debugger;
            var type = $(this).data('type');
            var sb = this.name;
            active[type]?active[type].call(this):'';
        });
        function isNull(data) {
            if (typeof(data)=="undefined" || data==null){
                //默认显示的图片
                return "../images/defaulPic.png";
            }
            return "../"+data;
        }


    });

</script>

</body>
</html>